---
interface Props {
  info: {
    title: string;
    url: string;
    iconClass?: string;
    textStyle?: string;
    bgStyle?: string;
    btnText?: string;
    btnStyle?: string;
  };
}

const { info } = Astro.props;
---

<a href={info.url} target="_blank">
  <div
    class:list={[
      "card max-lg:card-compact rounded-xl flex justify-center shadow-xl shadow-accent w-full lg:w-[26rem] md:h-[4.25rem] lg:h-[5rem] mb-8",
      info.bgStyle,
    ]}
  >
    <div class="card-body justify-center">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          {
            info.iconClass && (
              <div class:list={[info.iconClass, "w-8", "h-8", "mr-2"]} />
            )
          }
          <span
            class:list={[
              info.textStyle,
              "grow",
              "max-lg:text-sm",
              "text-xl",
              "whitespace-nowrap",
            ]}
          >
            {info.title}
          </span>
        </div>
        <span class={info.btnStyle}>{info.btnText}</span>
      </div>
    </div>
  </div>
</a>

<style>
  .jike {
    background: url("https://image.idealclover.cn/projects/Homepage/icons/icons.png") -256px -0px
      no-repeat;
    width: 32px;
    height: 32px;
  }
  .coolapk {
    background: url("https://image.idealclover.cn/projects/Homepage/icons/icons.png") -288px -0px
      no-repeat;
    width: 32px;
    height: 32px;
  }
  .sspai {
    background: url("https://image.idealclover.cn/projects/Homepage/icons/icons.png") -320px -0px
      no-repeat;
    width: 32px;
    height: 32px;
  }
  .Steam {
    background: url("https://image.idealclover.cn/projects/Homepage/icons/icons.png") -352px -0px
      no-repeat;
    width: 32px;
    height: 32px;
  }
  .mail_s {
    background: url("https://image.idealclover.cn/projects/Homepage/icons/icons.png") -0px -0px
      no-repeat;
    background-size: cover;
    width: 32px;
    height: 32px;
  }
  .QQ_s {
    background: url("https://image.idealclover.cn/projects/Homepage/icons/icons.png") -32px -0px
      no-repeat;
    background-size: cover;
    width: 32px;
    height: 32px;
  }
  .telegram_s {
    background: url("https://image.idealclover.cn/projects/Homepage/icons/icons.png") -64px -0px
      no-repeat;
    background-size: cover;
    width: 32px;
    height: 32px;
  }
  .twitter_s {
    background: url("https://image.idealclover.cn/projects/Homepage/icons/icons.png") -96px -0px
      no-repeat;
    background-size: cover;
    width: 32px;
    height: 32px;
  }
</style>
